<script setup>
// import { GetListCopeWithAPI } from '@/api/statistics/procure/orderTack.js'
import { GetSupplierTypeSelsctAPI } from '@/api/common/index'

const { proxy } = getCurrentInstance()

// 列表数据
const tableData = ref([])

// 按钮
const buttonList = ref([
  { type: 'export', hasPermi: 'finance:dataChange:export' },
])

// 列表枚举
const column = ref([
  { label: '供应商编号', prop: 'supplierCode' },
  { label: '供应商名称', prop: 'supplierName' },
  { label: '供应商类别', prop: 'typeName' },
  { label: '单据号', prop: 'doc' },
  { label: '单据类型', prop: 'type' },
  { label: '采购人员', prop: 'sellName' },
  { label: '开单时间', prop: 'time' },
  { label: '增加应付款', prop: 'augmentClosed' },
  { label: '增加预付款', prop: 'augmentAdvance' },
  { label: '应付款余额', prop: 'closedBalance' },
  { label: '备注', prop: 'remark' },
])

// 状态
const state = reactive({
  treeLoading: false,
  loading: false, // 列表加载状态
  btnLoading: false, // 按钮加载状态
  isShow: false, // 弹窗状态
  title: '新增', // 弹窗标题
  total: 0, // 列表总量
})

// 查询条件
const query = reactive({
  pageNum: 1,
  pageSize: 10,
})

//查询表单
const ruleForm = reactive({
  time: '', //时间
  typeName: '', //客户类别
  supplierCode: '', //客户
})

//供应商下拉数据
const SupplierType = ref([])

//监听此字段来触发事件
const typeName = ref([])

// 查询条件 枚举
const selectList = ref([
  { label: '开单时间', type: '日期范围' },
  { label: '供应商', type: '输入框', model: 'clientName' },
  { label: '供应商类别', type: '下拉单选', model: 'typeName' },
])

//查询
const submit = () => {
  getList()
}

//重置
const reset = async () => {
  // const { data: result } = await GetSupplierTypeSelsctAPI()
  ruleForm.typeName = ''
  query.typeName = ''
  ruleForm.supplierCode = ''
  defaultDate() //重置为当月时间
  getList() //调取列表接口
}

// 导出
const exportFun = () => {}

// 查询条件
const selectSubmit = (val) => {
  Object.keys(val).forEach((keyItem) => (query[keyItem] = val[keyItem]))
  getList()
}

//设置默认日期
const defaultDate = () => {
  //获取新的时间
  let date = new Date()
  //获取当前时间的年份转为字符串
  let year = date.getFullYear().toString()
  //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
  let month =
    date.getMonth() + 1 < 10
      ? '0' + (date.getMonth() + 1).toString()
      : (date.getMonth() + 1).toString()
  //获取天，判断是否小于10，如果是在字符串前面拼接'0'
  let da =
    date.getDate() < 10
      ? '0' + date.getDate().toString()
      : date.getDate().toString()
  //字符串拼接，开始时间，结束时间
  let end = year + '-' + month + '-' + da //当天
  let beg = year + '-' + month + '-01' //当月第一天
  ruleForm.time = [beg, end] //将值设置给插件绑定的数据
}
defaultDate()

// 获取列表
const getList = async () => {
  query.beginTime = ruleForm.time[0] //默认时间
  query.endTime = ruleForm.time[1] //默认时间
  query.supplierCode = ruleForm.supplierCode
  state.loading = true
  try {
    const result = await GetListCopeWithAPI(query)
    tableData.value = result
  } catch {
  } finally {
    state.loading = false
  }
}
getList()

// 获取供应商类别
const getetSupplierTypeSelsct = async () => {
  const { data: result } = await GetSupplierTypeSelsctAPI()
  SupplierType.value = result
  // ruleForm.typeName = result[0].value
  // typeName.value = result[0].value
}
getetSupplierTypeSelsct()
//下拉选择
const OptChange = (val) => {
  query.typeName = val
}

// watch(
//   () => typeName.value,
//   (val) => {
//     query.typeName = val
//     getList()
//   },
//   { deep: true }
// )
</script>

<template>
  <div class="app-container">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      inline
      scroll-to-error
      label-width="100px"
    >
      <el-form-item label="开单日期">
        <el-date-picker
          v-model="ruleForm.time"
          type="daterange"
          range-separator="-"
          start-placeholder="开始"
          end-placeholder="结束"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          :default-time="defauleTime"
        />
      </el-form-item>
      <el-form-item label="供应商">
        <el-input v-model="ruleForm.supplierCode" placeholder="请输入供应商" />
      </el-form-item>
      <el-form-item label="供应商类别">
        <el-select
          v-model="ruleForm.typeName"
          placeholder="请选择供应商类别"
          @change="OptChange"
        >
          <el-option
            v-for="item in SupplierType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <!-- <p-select isValue :option="customerSel" v-model="ruleForm.clientCode" @change="OptChange" /> -->
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="submit">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 查询条件组件 -->
    <!-- <p-select-form :selectForm="selectList" @selectSubmit="selectSubmit" /> -->
    <el-card>
      <!-- 按钮组件 -->
      <p-button :list="buttonList" @add="addDic" />
      <!-- 表格数据 -->
      <p-table
        class="tableClass"
        summary
        :amountList="['unitQuantity', 'costSum']"
        :isSel="false"
        :loading="state.loading"
        :data="tableData"
        :column="column"
        @change="handleSelectionChange"
        @pagination="getList"
        :height="500"
      >
        <template #columnCell="{ column, record }">
          <!-- 辅助属性 -->
          <p-producer
            :data="record.auxiliaryAttribute"
            v-if="column.label == '辅助属性'"
          />
        </template>
      </p-table>
    </el-card>
  </div>
</template>
<style scoped lang="scss">
.app-container ::v-deep .el-form-item__content {
  width: 240px !important;
}
.app-container ::v-deep .el-date-editor {
  width: 240px !important;
}
</style>
